import { ElIcon } from 'element-plus'

import i18n from '../locales'
console.log(i18n.global.t('menus.home'), 'i18n.global.t()');
export interface MenuModel {
  title: string
  icon?: (className: string) => JSX.Element
  name: string
  children?: MenuModel[]
}

export const menus: MenuModel[] = [
  {
    title: `${i18n.global.t('menus.home')}`,
    name: 'Workbench',
    icon: (className: string) => (
      <ElIcon class={className}>
        <svg class="icon" aria-hidden="true" style="width: 20px; height: 20px">
          <use xlink:href="#icon-jichupeizhi"></use>
        </svg>
      </ElIcon>
    )
  },
  {
    title: `${i18n.global.t('menus.node')}`,
    name: 'NodesPage',
    icon: (className: string) => (
      <ElIcon class={className}>
        <svg class="icon" aria-hidden="true" style="width: 20px; height: 20px">
          <use xlink:href="#icon-jiedianguanli"></use>
        </svg>
      </ElIcon>
    )
  },
  {
    title: `${i18n.global.t('menus.package')}`,
    name: 'PackApply',
    icon: (className: string) => (
      <ElIcon class={className}>
        <svg class="icon" aria-hidden="true" style="width: 20px; height: 20px">
          <use xlink:href="#icon-xieyipeizhi"></use>
        </svg>
      </ElIcon>
    )
  },
  {
    title: `${i18n.global.t('menus.tcc')}`,
    name: 'TccPack',
    icon: (className: string) => (
      <ElIcon class={className}>
        <svg class="icon" aria-hidden="true" style="width: 20px; height: 20px">
          <use xlink:href="#icon-zhandianguanli1"></use>
        </svg>
        {/* <img src="/src/assets/modules/icons/08.svg" width="19" height="19" /> */}
      </ElIcon>
    )
  },
  {
    title: `${i18n.global.t('menus.manage')}`,
    name: 'AdminExample',
    icon: (className: string) => (
      <ElIcon class={className}>
        <svg class="icon" aria-hidden="true" style="width: 20px; height: 20px">
          <use xlink:href="#icon-xitongguanliyuan"></use>
        </svg>
      </ElIcon>
    )
  }, {
    title: `${i18n.global.t('menus.system')}`,
    name: 'SystemConfig',
    icon: (className: string) => (
      <ElIcon class={className}>
        <svg class="icon" aria-hidden="true" style="width: 20px; height: 20px">
          <use xlink:href="#icon-xitongshezhi"></use>
        </svg>
      </ElIcon>
    )
  },
  // {
  //   title: '多级菜单(示例)',
  //   name: 'InfiniteMenu',
  //   icon: (className: string) => (
  //     <ElIcon class={className}>
  //       <Location />
  //     </ElIcon>
  //   ),
  //   children: [
  //     { title: 'Level 2.1', name: 'ExampleLevel2.1' },
  //     { title: 'Level 2.2', name: 'ExampleLevel2.2' },
  //     { title: 'Level 2.3', name: 'ExampleLevel2.3' }
  //   ]
  // }
]
